<template>
  <div>
    <el-dialog class="select-prod" title="选择装备" :visible.sync="selectprodVis" @close="close" width="500px" append-to-body :close-on-click-modal='false'>
        
        <el-row :gutter="16" style="line-height:40px">
          <el-col :span="8">
            <div>
              <label for="">一级类别：</label>
            </div>
          </el-col>
          <el-col :span="11">
            <el-select v-model="categoryvalue" placeholder="请选择" style="width:100%"  size="small" @change="selectCate($event)">
              <el-option
                v-for="item in first_category"
                :key="item.categoryId"
                :label="item.categoryName"
                :value="item.categoryId">
              </el-option>
            </el-select>
          </el-col>
          
        </el-row>

        <el-row :gutter="16" style="line-height:40px">
            <el-col :span="8">
            <div>
              <label for="">二级分类名称：</label>
            </div>
          </el-col>
          <el-col :span="11">
            <el-input v-model="category_two" size="small" placeholder="请输入名称" style="width:100%"></el-input>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" size="mini" style="width:60px" @click="searchCate">搜索</el-button>
          </el-col>
        </el-row>

        <el-row style="margin-top:20px;margin-bottom:20px">
          <el-col :span="24">
            <el-table ref="prodInfos" :data="tableData" border style="width: 100%" @selection-change="selectProd">
              <el-table-column type="selection" width="50"></el-table-column>
              <el-table-column prop="categoryTwoNumber" label="二级分类编号"></el-table-column>
              <el-table-column prop="categoryTwoName" label="二级分类名称"></el-table-column>
            </el-table>
          </el-col>
        </el-row>

      <!-- <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :page-sizes="[10]"
            layout="total, prev, pager, next"
            :total="30">
          </el-pagination>
        </el-col>
      </el-row> -->

        <div slot="footer" class="dialog-footer">
          <el-button size="small" @click="close">取 消</el-button>
          <el-button size="small" type="primary" :loading="submitLoading" @click="selectCateSuccess()">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetAllProdCate, GetAllTwoCate, SearchTwoCate } from '@/api/prod';
export default {
  name: 'selectcategory',
  props: ['selectprodDialog'],
  data() {
    return {
      selectprodVis: false,
      submitLoading: false,
      formLabelWidth: '90px',
      categoryvalue: '',
      category_two: '',
      first_category: [],
      selectedProd: [],
      tableData: []
    }
  },
  mounted() {
    this.$store.commit('ware/SET_SELECTPROD', []);
    this.getAllCate();
    this.getAllTwoCatetory();
  },
  methods: {
    close() {
      this.selectprodVis = false;
      this.$emit("update:selectprodDialog", false);
      this.$store.commit('ware/SET_SELECTPROD', []);
    },
    // 获取所有装备分类
    getAllCate() {
      GetAllProdCate().then( response => {
        let data = response.data;
        this.first_category = data;
      }).catch( error => {
        console.log(error)
      })
    },
    // 获取所有二级装备分类
    getAllTwoCatetory() {
      GetAllTwoCate().then( response => {
        let data = response.data;
        this.tableData = data;
      }).catch( error => {
        console.log(error)
      })
    },
    selectCate(value) {
        let twoCategory = this.first_category.filter( e => e.categoryId == value)
        this.tableData = twoCategory[0].categoryTwos
    },
    // 搜索商品
    searchCate() {
      let reqData = {
        categoryId: this.categoryvalue,
        categoryTwoName: this.category_two,
      }
      SearchTwoCate(reqData).then( res => {
        this.tableData = res.data
      })
    },
    // 选择商品
    selectProd(val) {
      this.selectedProd = val;
    },
    selectCateSuccess() {
      this.$store.commit('ware/SET_SELECTPROD', this.selectedProd);
      this.selectprodVis = false;
      this.$emit("update:selectprodDialog", false);
      this.$refs.prodInfos.clearSelection()
    },
  },
  watch: {
    selectprodDialog(newVal,oldVal) {  
      this.selectprodVis = newVal;
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,50,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
</style>